<template>
	<view class="new">
		<scroll-view class="left" scroll-y>
			<view :class="{active: num === index}" v-for="(item,index) in new_left" :key="item.id"
				@click="onclick(index)">{{item.name}}</view>
		</scroll-view>
		<scroll-view class="right" scroll-y>
			<view class="item_title" v-for="(item,index) in new_right_title" :key="item.id"
				@click="goxqy(item.products)">
				<view class="title">{{item.name}}</view>
				<view class="right_item_box">
					<view class="right_item" v-for="(item,index) in new_right_title[index].products" :key="item.id"
						@click="getindex(index)">
						<view class="img">
							<image :src="item.small_image"></image>
						</view>
						<view class="xiu">

							{{item.product_name}}


						</view>
					</view>
				</view>

			</view>


		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				num: 0,
				new_left: [],
				new_right_title: [],
				index: 0,

			}
		},
		onLoad() {
			this.getnew()
			uni.request({
				url: 'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
				success: res => {
					this.new_right_title = res.data.data.cate
				}
			})
		},
		methods: {
			//左边数据api
			getnew() {
				uni.request({
					url: 'http://demo.itlike.com/web/xlmc/api/homeApi/categories',
					success: res => {
						// console.log(res)
						this.new_left = res.data.data.cate
					}
				})
			},

			//左边目录点击事件
			onclick(index) {
				this.num = index
				uni.request({
					url: 'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk00' + (index + 1),
					success: res => {
						this.new_right_title = res.data.data.cate

					}

				})
			},
			getindex(index) {
				this.index = index
			},
			//详情页
			goxqy(item) {
				// console.log(this.index)
				uni.navigateTo({
					url: '../xqy/xqy?xqyshop=' + encodeURIComponent(JSON.stringify(item[this.index]))
				})
				// console.log(item.products[index])
			}
		},

		// onTabItemTap() {
		// 	// uni.request({
		// 	// 	url: 'http://demo.itlike.com/web/xlmc/api/homeApi/categoriesdetail/lk001',
		// 	// 	success: res => {
		// 	// 		this.new_right_title = res.data.data.cate
		// 	// 	}
		// 	// })
		// }
	}
</script>

<style lang="scss">
	view {
		box-sizing: border-box;
	}

	.active {
		color: #fff;
		background-color: #d81e06;
	}

	page {
		height: 100%;
		background-color: #F8F8F8;

		.new {
			height: 100%;
			display: flex;

			.left {
				width: 200rpx;
				height: 100%;
				border-right: 1px solid #eee;

				view {
					font-size: 27rpx;
					text-align: center;
					height: 100rpx;
					line-height: 100rpx;
					width: 100%;
					border-top: 0.5px solid #eee;
				}
			}

			.right {
				width: 550rpx;
				height: 100%;
				padding: 20rpx;

				.item_title {
					.title {
						width: 100%;
						height: 60rpx;
						line-height: 60rpx;
						margin-bottom: 20rpx;
						padding-left: 20rpx;
						font-size: 30rpx;
						border-left: 2px solid #d81e06;
					}

					.right_item_box {
						display: flex;
						flex-wrap: wrap;
						justify-content: space-between;

						.right_item {
							width: 250rpx;
							// height: 300rpx;
							margin-bottom: 20rpx;
							text-align: center;
							background-color: #fff;
							border-radius: 15rpx;
							box-shadow: 0 2rpx 2rpx 1rpx rgba(0, 0, 0, 0.1);

							.img {
								padding-top: 10rpx;

								image {
									width: 180rpx;
									height: 180rpx;
								}
							}

							.xiu {
								padding: 0 10rpx 0 10rpx;
								text-align: center;
								font-size: 28rpx;
								margin: 0rpx 10rpx 20rpx 10rpx;
							}
						}
					}

				}
			}
		}
	}
</style>
